<template>
  <div>
    <h2 class="align-center fs21 fw600 mt50">小米账号登录</h2>
    <!-- 图片居中对齐  就是给图片的父级设置 text-align是center -->
    <div class="align-center mt40">
      <img width="48" src="./../assets/icon.png"/>
    </div>
    <p class="align-center mt15 fs14 color06 letter1">
      让每个人都能享受科技的乐趣
    </p>
    <van-form @submit="onSubmit" class="form mt60" :show-error="false" ref="form">
      <van-field
        v-model="phone"
        name="手机号"
        placeholder="请输入手机号"
        :rules="phoneRules"
        :class="{'form-err': phoneErr}"  
        @blur="phone == ''&& (phoneErr = true)"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        placeholder="请输入密码"
        :rules="pwdRules"
        :class="{'form-err': pwdErr}"
         @blur="password == ''&& (pwdErr = true)"

      />
      <van-checkbox v-model="checked" class="mt20 mb25">
        <span class="fs13 color06 letter1 vb">
          已阅读并同意小米帐号 
          <a class="colorBlue">用户协议</a>
          和
          <a class="colorBlue">隐私协议</a>
        </span>
      </van-checkbox>
      <div class="mt15">
        <van-button :disabled="!(pwdValidate && phoneValidate)" round block type="info"  native-type="submit" class="fs18 btn">登 录</van-button>
        <!-- disabled true  不可使用  false  可以使用 -->
      </div>
    </van-form>
    <p class="align-center color06 fs13 mt20">
      <span>手机号登录</span>
      |
      <span>立即注册</span>
      |
      <span>忘记密码?</span>
    </p>
    <van-divider class="mt20 divider">其他方式登录</van-divider>
    <div class="divider flex just-between align-center">
      <div class="flex1">
        <img src="./../assets/icon.png" width="34" alt="">
      </div>
      <div class="flex1">
        <img src="./../assets/icon.png" width="34" alt="">
      </div>
      <div class="flex1">
        <img src="./../assets/icon.png" width="34" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      phone: '', // 用户输入的手机号
      phoneRules: [ // 手机号的验证规则
        {
          required: true, // 不得为空
          validator: this.validateUser, // 自定义的验证函数
          message: '手机号不得为空' // 验证失败需要展示到界面上
        }
      ],
      pwdRules: [ // 密码的验证规则
        {
          required: true, // 不得为空
          validator: this.validatePwd, // 自定义的验证函数
          message: '密码不得为空'
        }
      ],
      password: '', // 用户输入的密码
      checked: false, // 协议是否被选择
      phoneErr: false, // 控制phone的错误class  true说明有错误
      pwdErr: false, // 控制密码的错误class   false说明没错误
      phoneValidate: false,  // 手机号的验证结果 false
      pwdValidate: false  // 密码的验证结果
    }
  },
  methods: {
    onSubmit () {
      // check 为true 说明勾选了 用户条款  执行登录操作
      // check 为false 说明没勾选 用户条款  有个弹框
      if (this.checked == false) {
        this.$toast('请勾选用户协议')
        return false
      }else{
        axios.post('/api/login', {phone: this.phone,pwd: this.password}).then(data =>{
          if (data.data.code == 200) {
            localStorage.setItem('phone',this.phone)
            localStorage.setItem('userId',data.data.userId)
            this.$toast({
              message: data.data.msg,
              icon: 'success',
              onClose: ()=>{
                this.$router.push(localStorage.getItem('fromPath'))
              }
            });
          }else{
            this.$toast({
              message: data.data.msg,
              icon: 'cross',
            });
          }
        })
      }
    },
    validateUser (val) {  
      // 判断数据是否正确
      // result  true表示验证成功   false表示验证失败
      let result = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(val)
      // 如果验证失败，就将错误提示修改为  请输入正确手机号
      result == false && (this.phoneRules[0].message = '请输入正确手机号')
      // 验证失败  phoneErr true  表示 手机号出现错误
      result == false ? (this.phoneErr = true) : (this.phoneErr = false)
      // 手机号验证结果
      this.phoneValidate = result
      return result
    },
    validatePwd (val) {
      let result = true; // 验证结果
      let message; // 提示消息
      if (val.length < 6) {
        result = false
        message = '密码长度不得少于6位'
        this.pwdErr = true
      }else{
        this.pwdErr = false
        message = '密码不得为空'
      }
      this.pwdRules[0].message = message
      this.pwdValidate = result
      return result
    }
  }
}
</script>


<style scoped>
  .divider{
    width: 40%;
    margin-left: auto ;
    margin-right: auto ;
    color: rgba(0,0,0,20%);
    font-size: 12px;
  }
  .form{
    padding: 0 28px;
  }


  /* 讲解 */
  /* 深度选择器 */
  .form >>> .van-field__control{
    background: rgb(240, 240, 240);
    height: 54px;
    padding: 0 15px;
    border-radius: 20px;
  }
  .form >>> .van-cell{
    padding-left: 0;
    padding-right: 0;
  }
  .form >>> .van-icon-success::before{
    position: relative;
    font-size: 14px;
    top: -1px;
  }
  .form >>> .van-icon-success{
    background: rgb(240, 240, 240);
  }
  .form >>> .van-checkbox__icon--checked .van-icon-success{
    background: #90c8ff;
  }
  .form button{
    height: 50px;
  }
  .form >>> .van-field__control{
    margin: 0 2px;
  }
  /* 
    :hover 鼠标移上去的样式
    :active 鼠标按下去的激活样式
    :focus 输入框获得焦点的样式
  */

  /* 正常样式 */
  /* 当选框获得焦点的时候，边框是蓝色 */
  .form >>> .van-field__control:focus{
     border: 2px solid #0B84FF;
  }

  /* 验证失败 phoneErr为true   class加上form-err 变成红色 */
  .form-err >>> .van-field__control{
     border: 2px solid #f44336;
  }
  .form-err >>> .van-field__control:focus{
     border: 2px solid #f44336;
  }
  .form >>> .van-field__error-message{
    margin-left: 20px; 
    margin-top: 5px;
    letter-spacing: 2px;
    color: #f44336;
  }
  /* .bth >>> .van-button--info{
    background: rgba(11, 132, 255, 0.3);
  } */

  
</style>